<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片瀑布流</title>
    <style>
        .container {
            width: 90%;
            margin: 0 auto;
            border: 1px solid #eee;
            position: relative;
        }

        .container img {
            position: absolute;
            transition: all .5s linear;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 图片通过js动态生成 -->
    </div>
    <script>
        (function () {
            var container = document.querySelector(".container");
            var imgWidth = 220;
            function init() {
                // 1. 生成图片
                createImg();
                // 2. 绑定事件：页面宽度改变时，列数重新计算
                bindEvent();
            }
            var createImg = function () {
                // 创建图片，并定位
                for (let i = 0; i < 40; i++) {
                    var src = "./img/" + i + ".jpg";
                    var img = document.createElement("img");
                    img.src = src;
                    img.style.width = imgWidth + 'px';
                    container.appendChild(img);

                    // 排列每一张图
                    img.onload = setPosition
                }
            }
            var setPosition = function () {
                // 先确认有几列
                var info = cal();
                // 创建数组，数组里面保存每一列的高度
                var arr = new Array(info.columns);
                arr.fill(0);// 每一项填充为0
                // 计算每张图片的top，left
                for (let i = 0; i < container.children.length; i++) {
                    var img = container.children[i];
                    // 数组最小值--图片的top值
                    var minTop = getMin(arr);
                    img.style.top = minTop + "px";
                    // 获取高度最小的那一列的索引值，并计算那一列的高度
                    var index = arr.indexOf(minTop);
                    // 新的高度=图片高加间隙高
                    arr[index] += img.height + info.space;
                    // top值确定了，还要确定left值
                    var left = (index + 1) * info.space + index * imgWidth;
                    img.style.left = left + 'px';

                }
                // 图片时绝对定位，脱离标准流，所以无法打开盒子高度，自己计算
                var boxHeight = getMax(arr);
                container.style.height = boxHeight + 'px';
            }
            var cal = function () {
                var containerWidth = container.clientWidth;
                var columns = Math.floor(containerWidth / imgWidth);
                // 计算间隙:总间隙 = 容器宽度-列数*图片宽度；间隙个数=列数+1
                var spaceNumber = columns + 1;
                var space = (containerWidth - columns * imgWidth) / spaceNumber;
                return {
                    columns: columns,
                    space: space
                }
            }
            var getMin = function (arr) {
                var min = arr[0];
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i] < min) min = arr[i];
                }
                return min;
                // Math.min.apply(null,arr);
                // Math.min(...arr)
            }
            var getMax = function (arr) {
                var max = arr[0];
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i] > max) max = arr[i];
                }
                return max;
                // Math.min.apply(null,arr);
                // Math.min(...arr)
            }


            // var debounde = function (fn, duration) {
            //     if (timerId) return;
            //     return function () {
            //         timerId = setTimeout(() => {
            //             fn();
            //         }, duration);
            //     }
            // }
            var timerId = null;
            var bindEvent = function () {
                window.onresize = function () {
                    // 窗体尺寸改变时触发--防抖处理
                    if (timerId) clearTimeout(timerId);
                    timerId = setTimeout(setPosition, 500);
                }
            }

            init();
        })();
    </script>
</body>

</html>